import React from "react";
import {Animated} from "react-native";


import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';
import {px} from "../utils/ScreenUtil";
import {AnimatedEnergy} from "./Energy";




export default class SwingEnergy extends React.Component {
  state = {
    swing: new Animated.Value(0),
  }

  static defaultProps = {
    count: 5,//能量球数量
  }



  componentDidMount() {
    this.startAnimate();
  }

  startAnimate = () => {
    Animated.sequence([
      Animated.timing(this.state.swing, {
        toValue: px(10),//能量球弹跳高度
        duration: 1000,
      }),
      Animated.timing(this.state.swing, {
        toValue: 0,
        duration: 1000,
      })])
      .start(() => this.startAnimate(10));
  }

  _renderEnergy = () => {
    const {width, height, count} = this.props;
    const realHeight = height / 2;
    const offsentHeihgt = count % 2 !== 0 ? px(50) : 0;//偏移量
    const centerNum = count / 2;

    return Array.from({
      length: count,
    }).map((_, i) => {

      const offsentM = Math.ceil(centerNum - (i + 1));
      return {
        x: (i + 1) * width / (count + 1),
        y: offsentHeihgt * offsentM > 0 ? realHeight + offsentHeihgt * offsentM : realHeight - offsentHeihgt * offsentM,
      }
    }).map((point, index) => {
      return (
        <AnimatedEnergy
          key={index}
          index={index}
          point={point}
          swing={this.state.swing}
        />
      )
    })
  }

  render() {
    return (
      <Svg width={'100%'} height={'100%'}>
        {this._renderEnergy()}
      </Svg>
    )
  }
}

